/**
 * create by cyw 2020-5-26
 * 首页内容列表
 * */
import "./ContentList.scss"

import React from 'react'
import { connect } from "react-redux"
import { getListData } from "../../action/contentLisAction"

import ListItem from "component/ListItem/ListItem"

import ScrollView from "component/ScrollView/ScrollView"
class ContentList extends React.Component {
    constructor(props) {
        super(props)
        this.page = 0
        this.fetchData(this.page)

        this.state = {
            isend: false,
        };
    }

    onLoadPage() {
        this.page++
        // console.log('page', this.page)
        if (this.page > 3) {
            this.setState({
                isend: true,
            })
        } else {
            // console.log('fetchData')
            this.fetchData(this.page)
        }
    }

    fetchData(page) {
        this.props.dispatch(getListData(page))
    }
    renderItems() {
        let list = this.props.list
        // console.log('list', list)
        return list.map((item, index) => {
            return <ListItem key={index} itemData={item}></ListItem>
        })
    }
    render() {
        return (
            <div className="list-content">
                <h4 className="list-title">
                    <span className="title-line"></span>
                    <span>附近商家</span>
                    <span className="title-line"></span>
                </h4>
                <ScrollView loadCallback={this.onLoadPage.bind(this)} isend={this.state.isend}>
                    {this.renderItems()}
                </ScrollView>
                {/* <div className="loading">{this.state.loadingText}</div> */}
            </div>
        )
    }
}
export default connect(
    state => ({
        list: state.contentListReducer.list
    })
)(ContentList)